<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<script>
			$(function () {
				$.ajax({
					url: "showProduct.action",
					type: "get",
					dataType: "json",
					data: {pid: localStorage.getItem("pid")},
					success: function (result) {
						var data="<div class=\"col-md-6\">" +
								"<img style=\"opacity: 1;width:400px;height:350px;\" " +
								"class=\"medium\" src=\""+result.data.pimage+"\"></div>\n" +
								"<div class=\"col-md-6\">" +
								"<div><strong>"+result.data.pname+"</strong></div>" +
								"<div style=\"border-bottom: 1px dotted #dddddd;width:350px;margin:10px 0 10px 0;\">\n" +
								"<div>编号："+result.data.pid+"</div>\n" +
								"</div><div style=\"margin:10px 0 10px 0;\">商城价: <strong style=\"color:#ef0101;\">" +
								"￥："+result.data.shopPrice+"元/份</strong> 参 考 价： <del>￥"+result.data.marketPrice+"元/份</del>\n" +
								"</div><div style=\"margin:10px 0 10px 0;\">促销:" +
								"<a target=\"_blank\" title=\"限时抢购 (2014-07-30 ~ 2015-01-01)\"" +
								" style=\"background-color: #f07373;\">限时抢购</a></div>" +
								"<div style=\"padding:10px;border:1px solid #e7dbb1;width:330px;margin:15px 0 10px 0;" +
								";background-color: #fffee6;\"<form action=\"order.html\" method=\"post\">\n" +
								"<input type=\"hidden\" name=\"methodName\" value=\"add\">\n" +
								"<input type=\"hidden\" name=\"pid\" value=\"2\">\n" +
								"<div style=\"border-bottom: 1px solid #faeac7;margin-top:20px;padding-left: 10px;\">购买数量:\n" +
								"<input id=\"quantity\" name=\"count\" value=\"1\" maxlength=\"4\" size=\"10\" type=\"text\"> </div>\n" +
								"<div style=\"margin:20px 0 10px 0;;text-align: center;\"><a>" +
								"<button style=\"background: url('images/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);" +
								"height:36px;width:127px;\" onclick=''>加入购物车</a>" +
								"</div></form></div></div>";
						var pdesc= "<div style=\"background-color:#d3d3d3;width:930px;padding:10px 10px;margin:10px 0 10px 0;\">" +
								"<strong>商品介绍</strong></div><div>" +
								result.data.pdesc +
								"</div>";
						$("#queryById").html(data);
						$("#pdesc").html(pdesc);
						if(result.meta.status>500) {
							location.href = "error.html";
							localStorage.setItem("msg",result.meta.msg)
						}
					}
				});
			})
		</script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
		</style>
	</head>

	<body>
		<!--
            	描述：菜单栏和导航条
            -->

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>

		<script type="text/javascript">
			//页面加载完成后，就需要去异步请求 分类数据
			$(function() {
				//异步请求代码
				$.post("/store/category", { methodName: "searchAll" }, function(data) {
					//[{cname:xxx},{cname:xxx}]
					//data是JS对象 转成jQuery对象然后 遍历取出 (each)
					$(data).each(function(index, dom) { //index是索引一般不用,dom是遍历出来的元素
						//dom  ----> js   {cid:xxx,cname:xxx}   
						var cname = dom["cname"]; //手机数码、电脑办公    dom["cname"] ==> dom.cname
						var cid = dom["cid"];
						var temp = "<li><a href='/store/product?methodName=searchAllByCid&currPage=1&cid=" + cid + "'>" + cname + "</a></li>";
						$("#clist").append(temp);
					});

				}, "json");
			});
		</script>

		<!--
            	描述：菜单栏
            -->
		<div class="container-fluid">
			<div class="col-md-4">
				<img src="img/logo3.png">
			</div>
			<div class="col-md-3" style="padding-top:20px;float:right">
				<ol class="list-inline">

					<li>欢迎您：admin</li>
					<li>
						<a href="/store/login?methodName=logout">退出</a>
					</li>
					<li>
						<a href="order.html">我的订单</a>
					</li>

					<li>
						<a href="cart.html">购物车</a>
					</li>
				</ol>
			</div>
		</div>
		<!--
            	描述：导航条
            -->
		<div class="container-fluid">
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						<a class="navbar-brand" href="index.html">首页</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav" id="clist">
							<li>
								<a href="list.html">手机数码</a>
							</li>
							<li>
								<a href="list.html">电脑办公</a>
							</li>
							<li>
								<a href="list.html">家具家居</a>
							</li>
							<li>
								<a href="list.html">鞋靴箱包</a>
							</li>
							<li>
								<a href="list.html">图书音像</a>
							</li>
							<li>
								<a href="list.html">母婴孕婴</a>
							</li>
							<li>
								<a href="list.html">汽车用品</a>
							</li>
							<li>
								<a href="list.html">运动户外</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>

		<script type="text/javascript">
		</script>

		<div class="container">
			<div class="row">
				<div style="border: 1px solid #e4e4e4;width:930px;margin-bottom:10px;margin:0 auto;padding:10px;margin-bottom:10px;">
					<a href="index.html">首页&nbsp;&nbsp;&gt;</a>
					<a href="list.html">手机数码&nbsp;&nbsp;&gt;</a>
				</div>

				<div style="margin:0 auto;width:950px;" id="queryById">

				</div>
				<div class="clear"></div>
				<div style="width:950px;margin:0 auto;" id="pdesc">

				</div>
			</div>

			<div style="text-align: center;margin-top: 5px;">
				<ul class="list-inline">
					<li>
						<a href="http://www.feicuiedu.cn/" target="_blank">关于我们</a>
					</li>
					<li>
						<a href="http://www.feicuiedu.cn/" target="_blank">联系我们</a>
					</li>
					<li>
						<a>招贤纳士</a>
					</li>
					<li>
						<a>法律声明</a>
					</li>
					<li>
						<a>友情链接</a>
					</li>
					<li>
						<a target="_blank">支付方式</a>
					</li>
					<li>
						<a target="_blank">配送方式</a>
					</li>
					<li>
						<a>服务声明</a>
					</li>
					<li>
						<a>广告声明</a>
					</li>
				</ul>
			</div>
			<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
				Copyright © 2018-2019 科技 版权所有
			</div>

		</div>
	</body>
</html>